{% macro add_state_form() -%}
  <form ng-submit="addState(newStateDesc)">
    Add a new state:
    <input style="width: 30" type="text" list="states" ng-model="newStateDesc" placeholder="New State Name" required>
    <datalist id="states">
      <option ng-repeat="(id, properties) in states | orderBy:'properties.name':true" value="<[properties.name]>"></option>
    </datalist>
  </form>
{%- endmacro %}


<h4>
  Visualization
  <img class="oppia-help" src="/images/help.png" tooltip="This visualization shows how the exploration's states are linked. You can access each state's editor by clicking on its node." tooltip-placement="right">
</h4>

<div>
  <em>Click on a state node in the diagram below to edit it.</em>

  <br><br>

  <center ng-show="!isEndStateReachable()" class="oppia-warning">
    <i class="icon-warning-sign"></i>
    <strong>Warning: </strong>This exploration cannot be completed. The END state is unreachable.
  </center>

  <center ng-hide="graphData">
    <img src="/images/loading.gif" alt="Loading..." width="50px">
  </center>
  <state-graph-viz val="graphData"></state-graph-viz>

  {{ add_state_form() }}
</div>
